<template>
    <div class="sky-detail">
        <div class="i-layout-page-header">
            <PageHeader hidden-breadcrumb>
                <div slot="title">
                    刘志航 <Icon type="md-heart" /><Icon type="md-paper-plane" />
                    <span class="sky-s1">男 26 <em>ID#00012294</em></span>
                    <tag class="ivu-ml-16">13565658859</tag><tag>13565658859</tag>
                    <Tag color="volcano">预约</Tag>
                </div>
                <div slot="action">
                    <ButtonGroup>
                        <Button @click="handleRender" >备注</Button>
                        <Button>关注</Button>
                        <Button>标识远程到诊</Button>
                    </ButtonGroup>
                    <Button @click="handleOpenDrawer" type="primary">编辑</Button>
                </div>
                <div slot="content">
                    <DescriptionList :col="4">
                        <Description term="当前归属人：">高玲</Description>
                        <Description term="微信号：">skyfly</Description>
                        <Description term="居住城市：">成都</Description>
                        <Description term="地址：">成都蜀山区</Description>
                        <Description term="病种：">白癜风</Description>
                        <Description term="下次回访时间：">2019-07-16</Description>
                        <Description term="回访次数：">3次</Description>
                        <Description term="预约时间：">2019-09-16</Description>
                        <Description term="到诊时间：">2019-09-16 16:05</Description>
                        <Description term="诊室：">3诊</Description>
                        <Description term="职业：">工人</Description>
                        <Description term="婚姻状况：">未婚</Description>
                    </DescriptionList>
                    <DescriptionList :col="2">
                        <Description term="亲友：">
                            <Ellipsis :text="text" :lines="1" tooltip />
                        </Description>
                        <Description term="标签：">
                            <tag>费用</tag>
                            <tag>专家</tag>
                        </Description>
                    </DescriptionList>
                    <DescriptionList :col="1">
                        <Description term="备注：">{{ value }}</Description>
                    </DescriptionList>
                </div>
            </PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt i-table-no-border">
            <Tabs :animated="false">
                <TabPane label="用户足迹">
                    <Timeline class="ivu-pt-16">
                        <TimelineItem>
                            <p class="time">2019-10-21 11:59</p>
                            <p class="content">号码由【--】变更为【15956574518】</p>
                            <p class="consultant">
                                医助
                                <span class="c-inr">王语文</span>
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-10-18 11:59</p>
                            <p class="content">问我普查名额怎么申请 想过来看看</p>
                            <p class="consultant">
                                客服
                                <span class="c-inr">王语文</span>
                                <Badge status="processing" text="继续回访" />
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-10-16 11:59</p>
                            <p class="content">平时7点下班，也没有休息天，想过段时间再看，推了全免检查到31号，手机短信发地址， 一直说谢谢，希望比较小</p>
                            <p class="consultant">
                                医助
                                <span class="c-inr">王语文</span>
                                <Badge status="warning" text="未接通/未回复" />
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-09-21 11:59</p>
                            <p class="content">问我普查名额怎么申请 想过来看看</p>
                            <p class="consultant">
                                客服
                                <span class="c-inr">王语文</span>
                                <Badge status="processing" text="继续回访" />
                            </p>
                        </TimelineItem>
                    </Timeline>
                    <div class="ivu-text-center"><Button type="primary">加载更多</Button></div>
                </TabPane>
                <TabPane label="回访信息">
                    <returnVisit />
                </TabPane>
                <TabPane label="营销信息">
                    <consume />
                </TabPane>
                <TabPane label="病历信息">
                    <Case />
                </TabPane>
                <TabPane label="微信信息">
                    <weixin />
                </TabPane>
                <TabPane label="来源信息">
                    <origins />
                </TabPane>
                <TabPane label="操作日志">
                    <Journal />
                </TabPane>
            </Tabs>
        </Card>
        <Modal
            class="model"
            v-model="showUpdate"
            @on-ok="handleOk"
            @on-cancel="handleCancel"
            title="回访详细"
            :mask-closable="false"
            width="80%"
        >
            <Row>
                <Col span="6" class="side-bg">
                <div class="basic">
                    <h3>颜如玉 21 女</h3>
                    <h4 class="b-phone">
                        手机号：13585687575
                        <span>诊疗号：2350265</span>
                    </h4>
                </div>
                <div class="sky-screen">
                    <row>
                        <Col span="16">
                        <DatePicker :editable="false" type="daterange" placeholder="回访日期"></DatePicker>
                            </Col>
                        <Col span="8">
                        <Select v-model="formItem.select">
                            <Option value="全部">全部</Option>
                            <Option value="医助">医助</Option>
                            <Option value="客服">客服</Option>
                        </Select>
                            </Col>
                    </row>
                </div>
                <Divider />
                <Timeline>
                    <TimelineItem>
                        <p class="time">2019-10-21 11:59</p>
                        <p class="content">告知普查名额这两天还有 想下午过来看看 2点左右 血液0元 CT 0元</p>
                        <p class="consultant">
                            医助
                            <span class="c-inr">王语文</span>
                            <Badge status="success" text="已到院" />
                        </p>
                    </TimelineItem>
                    <TimelineItem>
                        <p class="time">2019-10-18 11:59</p>
                        <p class="content">问我普查名额怎么申请 想过来看看</p>
                        <p class="consultant">
                            客服
                            <span class="c-inr">王语文</span>
                            <Badge status="processing" text="继续回访" />
                        </p>
                    </TimelineItem>
                    <TimelineItem>
                        <p class="time">2019-10-16 11:59</p>
                        <p class="content">平时7点下班，也没有休息天，想过段时间再看，推了全免检查到31号，手机短信发地址， 一直说谢谢，希望比较小</p>
                        <p class="consultant">
                            医助
                            <span class="c-inr">王语文</span>
                            <Badge status="warning" text="未接通/未回复" />
                        </p>
                    </TimelineItem>
                    <TimelineItem>
                        <p class="time">2019-09-21 11:59</p>
                        <p class="content">问我普查名额怎么申请 想过来看看</p>
                        <p class="consultant">
                            客服
                            <span class="c-inr">王语文</span>
                            <Badge status="processing" text="继续回访" />
                        </p>
                    </TimelineItem>
                </Timeline>
                </Col>
                <Col span="18">
                <div class="title">回访信息</div>
                <Divider />
                <Form :model="formItem" :label-width="118" class="return-form">
                    <FormItem label="回访状态" required>
                        <RadioGroup v-model="formItem.radio">
                            <Radio label="未接通">未接通</Radio>
                            <Radio label="微信拉黑">微信拉黑</Radio>
                            <Radio label="继续回访">继续回访</Radio>
                            <Radio label="已到院">已到院</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="回访方式" required>
                        <RadioGroup v-model="formItem.radios">
                            <Radio label="电话">电话</Radio>
                            <Radio label="微信">微信</Radio>
                            <Radio label="QQ">QQ</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="回访内容" required>
                        <Input
                            v-model="formItem.textarea"
                            type="textarea"
                            :autosize="{minRows: 2,maxRows: 5}"
                            placeholder="请输入回访内容"
                        ></Input>
                    </FormItem>
                    <FormItem label="就诊类型">
                        <Select v-model="formItem.select" style="width:190px">
                            <Option value="正常">正常</Option>
                            <Option value="继续回访">继续回访</Option>
                            <Option value="预约">预约</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="下次回访时间" required>
                        <DatePicker :editable="false"
                                    type="date"
                                    placeholder="请输入回访时间"
                                    v-model="formItem.date"
                        ></DatePicker>
                    </FormItem>
                    <FormItem label="下次复诊时间">
                        <DatePicker :editable="false"
                                    type="date"
                                    placeholder="请输入复诊时间"
                                    v-model="formItem.date1"
                        ></DatePicker>
                    </FormItem>
                </Form>
                </Col>
            </Row>
        </Modal>
        <Drawer title="编辑用户" v-model="drawer" width="720" :mask-closable="false" :styles="styles">
            与新增患者界面一致
            <div class="demo-drawer-footer ivu-mt-16">
                <Button style="margin-right: 8px" @click="handleDrawerCancel">取消</Button>
                <Button type="primary" :loading="remarksloading" @click="handleDrawer">保存</Button>
            </div>
        </Drawer>
    </div>
</template>

<script>
    import returnVisit from './returnVisit';
    import Case from './Case';
    import weixin from './weixin';
    import origins from './origins';
    import consume from './consume';
    import Journal from './Journal';

    export default {
        name: 'index',
        components: { returnVisit, Case, weixin, consume, origins, Journal },
        data () {
            return {
                showUpdate: false,
                modal: false,
                loading: false,
                value: '',
                drawer: false,
                text: '王小贱 | 13386880987 , 王二贱 | 13386880986',
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                },
                formItem: {
                    input: '',
                    select: '',
                    radio: '未接通',
                    radios: '微信',
                    checkbox: [],
                    date: '',
                    date1: '',
                    time: '',
                    desc: '',
                    textarea: ''
                },
                labelList: [
                    {
                        value: '在乎费用',
                        label: '在乎费用'
                    },
                    {
                        value: '治疗效果',
                        label: '治疗效果'
                    },
                    {
                        value: '路程远',
                        label: '路程远'
                    }
                ],
                cityList: [
                    {
                        value: '合肥',
                        label: '合肥'
                    },
                    {
                        value: '武汉',
                        label: '武汉'
                    },
                    {
                        value: '苏州',
                        label: '苏州'
                    }
                ],
                contlist: [
                    {
                        value: '头部',
                        label: '头部'
                    },
                    {
                        value: '手部',
                        label: '手部'
                    },
                    {
                        value: '脸部',
                        label: '脸部'
                    }
                ],
                model11: '',
                city: '',
                labelPosition: 'left',
                formData: {
                    personnel: [],
                    Occupation: ''
                }
            };
        },
        methods: {
            back () {
                this.$router.go(-1);
            },
            handleSubmit () {
                this.showUpdate = true;
            },
            handleCancel () {
                this.showUpdate = false;
            },
            handleOk () {
                this.showUpdate = false;
                this.$Message.success('回访成功');
            },
            handleOpenDrawer () {
                this.drawer = true;
            },
            handleDrawerCancel () {
                this.drawer = false;
            },
            handleDrawer () {
                this.drawer = false;
                this.$Message.success('编辑成功');
            },
            handleRender () {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                type: 'textarea',
                                placeholder: '请输入备注内容'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                }
                            }
                        });
                    }
                });
            }
        }
    };
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
h4 span {
    margin-left: 5px;
}
.side-bg {
    background: #f2f2f2;
    padding: 24px !important;
}
.return-form {
    padding: 24px;
}
.title {
    font-weight: bold;
    font-size: 16px;
    padding: 24px 0 0 24px;
}
.sky-screen {
    margin-top: 16px;
}
.sky-s1 {
    font-size: 14px;
    margin-left: 10px;
    color: #666;
}
.sky-s1 em {
    font-size:12px;
    color:#888;
    margin-left:10px;
}
.sky-note {
    padding: 5px 0;
}
</style>
<style>
.model .ivu-modal-body {
    padding: 0px;
}
</style>
